<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
	<style>
	html { margin:0; padding:0; font-size:62.5%; }
	body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
	h1 { font-size:1.8em; }
	.demo { overflow:auto; border:1px solid silver; min-height:100px; }
	
	.jstree-default .jstree-themeicon{display:none;}

	</style>
</head>
<body>
	<script type="text/javascript">
    var nodeData = [{"id":1,"parent":"#","text":"\u524d\u53f0","type":"menu","state":{"selected":false}},{"id":2,"parent":"#","text":"API\u63a5\u53e3","type":"menu","state":{"selected":false}},{"id":3,"parent":1,"text":"\u4f1a\u5458\u6a21\u5757","type":"menu","state":{"selected":false}},{"id":4,"parent":2,"text":"\u4f1a\u5458\u6a21\u5757","type":"menu","state":{"selected":false}},{"id":5,"parent":3,"text":"\u767b\u5f55","type":"menu","state":{"selected":true}},{"id":6,"parent":3,"text":"\u6ce8\u518c","type":"menu","state":{"selected":true}},{"id":7,"parent":3,"text":"\u4f1a\u5458\u4e2d\u5fc3","type":"menu","state":{"selected":true}},{"id":8,"parent":3,"text":"\u4e2a\u4eba\u8d44\u6599","type":"menu","state":{"selected":false}},{"id":9,"parent":4,"text":"\u767b\u5f55","type":"menu","state":{"selected":true}},{"id":10,"parent":4,"text":"\u6ce8\u518c","type":"menu","state":{"selected":true}},{"id":11,"parent":4,"text":"\u4f1a\u5458\u4e2d\u5fc3","type":"menu","state":{"selected":true}},{"id":12,"parent":4,"text":"\u4e2a\u4eba\u8d44\u6599","type":"menu","state":{"selected":true}}];
    </script>
	
	<input type="checkbox" name="" id="checkall"> <label for="checkall"><small>选中全部</small></label></span>

	<input type="checkbox" name="" id="expandall"> <label for="checkall"><small>展开全部</small></label></span>


	<form data-parsley-validate action="https://www.solux.cn">

		<input id="c-name" class="form-control" name="row[name]" type="text" value="测试分组">

    	<input type="hidden" name="row[rules]" value="5,6,7,9,10,11,12,4,2,3,1" />
    	<input type="text" name="">
    	<button type="button" class="btn btn-primary btn-submit">Validate</button>

    </form>

	<div id="treeview"></div>
	
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script src="./../../dist/jstree.min.js"></script>
	
	<script>
	
	//读取选中的条目
    $.jstree.core.prototype.get_all_checked = function (full) {
        var obj = this.get_selected(), i, j;
        for (i = 0, j = obj.length; i < j; i++) {
            obj = obj.concat(this.get_node(obj[i]).parents);
        }
        obj = $.grep(obj, function (v, i, a) {
            return v != '#';
        });
        obj = obj.filter(function (itm, i, a) {
            return i == a.indexOf(itm);
        });
        return full ? $.map(obj, $.proxy(function (i) {
            return this.get_node(i);
        }, this)) : obj;
    };

	$(document).on('click', '.btn-submit', function(event) {
		var self = $(this);

        self.attr('disabled', true);

        if ($("#treeview").size() > 0) {
	        var r = $("#treeview").jstree("get_all_checked");
	        $("input[name='row[rules]']").val(r.join(','));
	    }

        $.ajax({
            url: self.parents('form').attr('action'),
            type: 'get',
            dataType: 'json',
            data: self.parents('form').serialize(),
        }).done(function() {
            self.removeAttr('disabled');
            console.log("success");
        })
        .fail(function() {
            self.removeAttr('disabled');
            console.log("error");
        })

        return true;

    });


    //渲染权限节点树
    //销毁已有的节点树
    $("#treeview").jstree("destroy");
    rendertree(nodeData);
    //全选和展开
    $(document).on("click", "#checkall", function () {
        $("#treeview").jstree($(this).prop("checked") ? "check_all" : "uncheck_all");
    });
    $(document).on("click", "#expandall", function () {
        $("#treeview").jstree($(this).prop("checked") ? "open_all" : "close_all");
    });


    function rendertree(content){
    	$("#treeview").on('redraw.jstree', function (e) {
	        $(".layer-footer").attr("domrefresh", Math.random());
	    }).jstree({
	        "themes": {"stripes": true},
	        "checkbox": {
	            "keep_selected_style": false,
	        },
	        "types": {
	            "root": {
	                "icon": "fa fa-folder-open",
	            },
	            "menu": {
	                "icon": "fa fa-folder-open",
	            },
	            "file": {
	                "icon": "fa fa-file-o",
	            }
	        },
	        "plugins": ["checkbox", "types"],
	        "core": {
	            'check_callback': true,
	            "data": content
	        }
	    });
    }
	

	</script>
</body>
</html>